<template>
  <div id="background">
    <div class="container">
      <form action="">
        <h1>Login</h1>
        <div class="form">
          <input type="text" placeholder="请输入id" v-model="InputId"/>
          <div></div>
          <span @click="IntoWhiteBoard" class="btn">进入白板</span>
          <span @click="Create" class="btn">创建新白板</span>
          <div class="canvasBox" ref="box"></div>
        </div>
      </form>
    </div>
  </div>
</template>
  <script>
import axios from 'axios'


export default {
  name: 'Login',
  data() {
    return {
      InputId:null
    }
  },
  methods: {
    // 创建新面板
    Create() {
      this.$router.push('/CreateWhiteBoard')
    },
    IntoWhiteBoard() {
      var that=this;
      if(this.InputId){
        axios
            .get('http://localhost:8080/panel/'+this.InputId)
            .then(function (response) {
              if(response.data.code==500){
                alert("id不存在！")
              }else if (response.data.code==200){
                that.$router.push({ path: '/IntoWhiteBoard', query: { id: that.InputId,json:response.data.data.json} });
              }
            })
      }else{
        alert("请输入id")
      }
    }
  }
}
</script>
  <style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url('../../images/1.png');
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  width: 480px;
  /*height: 300px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #00000090;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
}
.container h1 {
  color: aliceblue;
  margin-left: 20px;
  font-size: 30px;
}
input {
  margin-left: 40px;
  padding: 4px;
  margin-bottom: 20px;
  border: solid 1px #4e5ef3;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 23px;
  background: #f1f1f190;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
.btn {
  /* position: relative; */
  font-size: 15px;
  display: inline-block;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  margin-top: 18px;
  box-shadow: none;
  color: white;
  margin-left: 40px;
  margin-right: 10px;
  margin-bottom:50px ;
  padding: 5px 10px;
}
</style>
